<!--通话评分弹窗-->
<template>
  <!--<div>-->
    <div class="call-grade" :class="callDialogShow ? 'layout-qua' : 'layin-quau'">
      <div v-if="!loading">
        <div class="call-grade-left">
          <h2>{{$t('intelligentQualityCheck.intelCallDetail')}}
          </h2>
          <div class="call-grade-left-con">
            <affix :label="$t('webchat.basicInfo')" class="call-detail">
              <detail-table :callData="currentItemCall1" :audioId="flagId" :isCallGrade="true" :pauseAudio="pauseAudio"></detail-table>
            </affix>
            <affix :label="$t('business.businessInfo')">
              <div class="business">
                <div v-if="businessShow.length ===0" >{{$t('qualityCheck.noBusinessInfo')}}</div>
                <div class="history-content" v-for="(item, index) in businessShow" :key="index">
                  <div class="data">
                    <div style="float: left;">{{item.createUser}}<span class="pad-left">{{$t('business.createBusiness')}}</span></div>
                    <div style="float: right;"><span class="pad-right">{{$t('public.callStatus')}}</span>{{item.step}}</div>
                  </div>
                  <div class="clear"></div>
                  <div v-for="(one, index) in item.data" :key="index" class="bus-info div-color">
                    <div v-if="one.name === $t('business.businessNumber')">
                      <span>{{one.name + $t('public.colon')}}</span><span>{{one.value}}</span>
                      <span @click="busShowDetail(item._id)" style="float: right;" class="span-color"><i class="icon iconfont font12 pad-right" :class="busDetailShow? 'icon-shouqi':'icon-zhankai1'"></i>{{busDetailShow?$t('qualityCheck.businessUp'):$t('qualityCheck.businessDown')}}</span>
                    </div>
                    <div v-else>
                      <span>{{one.name + $t('public.colon')}}</span>
                      <span class="break-all" v-if="typeof one.value === 'object'">
                        <div v-for="(item1, index) in one.value" :key="index">
                          <globalPopup :url="item1.url" :key="item1.url2"
                                       @showBigImage="showBigImage"
                                       :name="item1.name" :currObj="item1" :srcUrl="item1.url2" :imgObj="item.data"></globalPopup>
                        </div>
                      </span>
                      <span class="break-all" v-else v-html="one.value"></span>
                    </div>
                  </div>
                  <business class="business-dialog bus-info" :busId="busId" :showHistory="true" v-if="busDetailShow"  @event="businessEvent"></business>
                </div>
              </div>
            </affix>
          </div>
        </div>
        <div class="call-grade-right">
          <h2>{{$t('qualityCheck.grade2')}}
            <div v-show="callDialogShow" class="close" @click="closeWindow"><i class="el-icon-close"></i></div>
          </h2>
          <div class="call-grade-right-con">
            <div class="wrap_grade">
              <el-popover
                ref="popover4"
                placement="top"
                width="400"
                trigger="hover">
                <quality-assist :ruleRender="ruleRender"></quality-assist>
              </el-popover>
              <span v-popover:popover4 class="assist">{{$t('intelligentQualityCheck.intelQualiAssist')}}</span>
            </div>
            <el-row :gutter="10">
              <el-col :span="6" class="grade_ipt">
                <span class="qc_score">{{$t('intelligentQualityCheck.intelGradeNum')}}:</span>
              </el-col>
              <el-col :span="18">
                <el-input v-model.trim="data.qc_grade"></el-input>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="6" class="grade_are">
                <span>{{$t('intelligentQualityCheck.intelGradeDetail')}}:</span>
              </el-col>
              <el-col :span="18">
                <el-input v-model="data.comment" type="textarea"></el-input>
              </el-col>
            </el-row>
            <single-label class="single-label-grade" v-if="labelType === 'single' && isCallLabel" :callLabel="getCallLabel" :disabled="disabled" :checkLabels="currentItemCall.LABELS || []" :callSheetId="currentItemCall.CALL_SHEET_ID" :flag="flagQC" :refreshCallLabel="refreshCallGrade"></single-label>
            <multi-label v-if="labelType === 'multi' && isCallLabel" :callLabel="getCallLabel" :disabled="disabled" :checkLabels="currentItemCall.LABELS || []" :callSheetId="currentItemCall.CALL_SHEET_ID" :flag="flagQC" :refreshCallLabel="refreshCallGrade" :showAdd="true"></multi-label>
            <div style="margin:40px 0;text-align:center;">
              <el-button size="mini" @click="closeWindow">{{$t('public.cancel')}}</el-button>
              <el-button size="mini" @click.stop="saveGrade('saveGrade')" v-if="passBtn" style="display: none">{{$t('intelligentQualityCheck.intelConfirm')}}</el-button>
              <el-button size="mini" @click.stop="nextGrade" v-if="passBtn">{{$t('qualityCheck.passNext')}}</el-button>
              <el-button size="mini" type="primary" @click="saveGrade('saveGradeAnd')" v-if="!disabled">{{saveBtnDescribe}}</el-button>
            </div>
          </div>
        </div>
      </div>
      <div v-show="callDialogShow" class="mask-qua"></div>
    </div>
  <!--</div>-->
</template>
<script>
  import globalPopup from '@/components/ui-modules/affix/globalPopup.vue'
  import qualityAssist from './qualityAssist.vue'
  import {checkform} from '@/utils/validate'
  import { commitImg } from '@/utils/publicMethod.js'
  import {deepClone, getCache, getAllUseSingleCallLabel, getAllUseMultiCallLabel} from '@/utils/m7Utils.js'
  import {getBusinessHistoryDataNew, showCountDown} from '@/utils/workflowUtils.js'
  import business from '@/components/public-modules/cust-tab-content/business/index.vue'
  import affix from '../../../ui-modules/affix/Affix.vue'
  import singleLabel from '@/components/business-modules/call/SingleLabel.vue'
  import MultiLabel from '@/components/business-modules/call/MultiLabel.vue'
  import AudioCommon from '@/components/public-modules/audio'
  import DetailTable from '@/components/public-modules/cust-tab-content/call-detail/DetailTable.vue'
  export default {
    name: 'QCcallGrade',
    data () {
      return {
        pauseAudio: 'open',
        rules: [],
        data: {
          qc_grade: '',
          comment: ''
        },
        currentItemCall1: {},
        busId: '',
        loading: true,
        busDetailShow: false,
        COMMENT: '',
        configListForm: {},
        flagQC: 'QC',
        isCallLabel: true,
        isAddPerformanceChecked: true,   //    是否 算入绩效考核  座席提交时 加的
        refreshAudio: 0,
        dataType: ['pdf', 'PDF', 'txt', 'TXT'],
        changeMonitorType: 'enable'
      }
    },
    components: {
      globalPopup,
      qualityAssist,
      business,
      singleLabel,
      MultiLabel,
      affix,
      AudioCommon,
      DetailTable
    },
    computed: {
      saveBtnDescribe () {
        return this.reGrade ? this.$t('public.save') : this.$t('qualityCheck.saveAndNext')
      },
      passBtn () {
        return !this.reGrade
      },
      businessShow () {
        let data = this.currentItemCall.busHistory || []
        let arr = []
        for (let i = 0; i < data.length; i++) {
          let busObj = {_id: data[i]._id}
          let item = data[i]
          busObj.lastUpdateUser = getCache('agents', item.lastUpdateUser).displayName
          busObj.createUser = getCache('agents', item.createUser).displayName
          busObj.step = getCache('businessFlowStep', item.step).name
          busObj.flow = getCache('businessFlow', item.flow).name
          busObj.data = getBusinessHistoryDataNew({excuteData: item.historyData, action: 'create'}, item)
          arr.push(busObj)
        }
        return arr
      },
      getCallLabel () {
        this.$nextTick(() => { // 第一次进来加载不到录音的dom
          this.refreshAudio = Math.random()
        })
        let allLabel = deepClone(this.$getCache('callLabel'))
        if (allLabel === -1) {
          this.isCallLabel = false
          allLabel = []
        }
        let labelType = this.$store.state.call.transCache.callLabelType
        let multiObj = this.$store.state.call.transCache.multiLabel
        let singleObj = this.$store.state.call.transCache.singleLabel
        if (multiObj && labelType === 'multi') { // 能取多标签并且状态是多级
          return multiObj
        } else if (singleObj.singleLabel && labelType === 'single') { // 能取单标签并且状态是单级
          return singleObj.singleLabel
        } else { // 取不到标签，重新往call里面存单标签和多标签
          let singleObj = getAllUseSingleCallLabel(allLabel)
          this.$store.commit('call/SET_CALL_SINGLE_LABEL', singleObj)
          let multiObj = getAllUseMultiCallLabel(allLabel)
          this.$store.commit('call/SET_CALL_MULTI_LABEL', multiObj)
          if (labelType === 'single') {
            return singleObj.singleLabel
          } else if (labelType === 'multi') {
            return multiObj
          }
        }
      }
    },
    props: {
      ruleRender: Array,
      currentItemCall: Object,
      currentGrade: Object,
      template: Object,
      refreshCallGrade: {type: Number, default: 0},
      reGrade: {type: Boolean, default: false},
      disabled: {type: Boolean, default: false},
      callDialogShow: {type: Boolean, default: false},
      flagId: {type: String, default: ''}
    },
    methods: {
      showBigImage (item, obj) {
        commitImg(item, obj)
      },
      checkImg (value) {
        if (checkform(value, 'Img')) {
          return false
        } else {
          return true
        }
      },
      businessEvent (eventData) {
        let data = eventData.data
        this.busId = data._id
        if (eventData.event !== 'changeBusinessMaster') {
          this.$store.dispatch('getBusinessDetailById', {_id: this.busId})
        }
      },
      busShowDetail (id) {
        this.busDetailShow = !this.busDetailShow
        if (this.busDetailShow) {
          this.$store.dispatch('getBusinessDetailById', {_id: id}).then(() => {
            this.busId = id
          })
        }
      },
      fetchData () {
        let currentItemCallData = deepClone(this.currentItemCall)
        console.log(this.currentItemCall)
        currentItemCallData.CALL_TIME_LENGTH_show = showCountDown(currentItemCallData.CALL_TIME_LENGTH * 1000)
        if (currentItemCallData.RING_TIME_LENGTH && currentItemCallData.RING_TIME_LENGTH !== '00:00:00') {
          currentItemCallData.RING_TIME_LENGTH_show = showCountDown(currentItemCallData.RING_TIME_LENGTH * 1000)
        } else {
          currentItemCallData.RING_TIME_LENGTH_show = '00:00:00'
        }
        this.currentItemCall1 = currentItemCallData
      },
      nextGrade () {
        this.data.qc_grade = ''
        this.data.comment = ''
        this.pauseAudio = 'close'
        this.$emit('nextGrade')
      },
      // 保存评分或保存并评下一个
      saveGrade (upEvent) {
        if (!checkform(this.data.qc_grade, 'Number2') && this.data.qc_grade) {
          if (parseFloat(this.data.qc_grade) > 100) {
            this.$message.error(this.$t('intelligentQualityCheck.intelGradeThanMax'))
            return
          }
          this.pauseAudio = 'close'
          let data = {}
          // 转一下怕影响
          data.grade_data = JSON.parse(JSON.stringify(this.data))
          data.grade_data.qc_grade = parseFloat(data.grade_data.qc_grade)
          data.CALL_SHEET_ID = this.currentItemCall.CALL_SHEET_ID
          console.log(data)
          this.$emit(upEvent, data)
          // 清空处理
          this.data.qc_grade = ''
          this.data.comment = ''
        } else {
          if (!this.data.qc_grade) {
            this.$message.error(this.$t('intelligentQualityCheck.intelNoGrade'))
            return
          }
          this.pauseAudio = 'close'
          // callback(new Error(this.$t('qualityCheck.pleaseEnterRightNum')))
          this.$message.error(this.$t('intelligentQualityCheck.intelGradeShouldNum'))
        }
      },
      changeAudioSpeed (item) {
        let local = window.localStorage
        local.setItem('audioSpeed', item)
        let myAudio = document.getElementById('quality-autoplay_' + this.flagId + '_old')
        if (myAudio && myAudio.playbackRate) {
          myAudio.playbackRate = item
        }
      },
      closeWindow () {
        this.data.qc_grade = ''
        this.busDetailShow = false
        this.data.comment = ''
        this.$emit('close')
        this.pauseAudio = 'close'
      }
    },
    beforeMount () {
      let p1 = this.$store.dispatch('getCache', {type: 'businessFlowStep'})
      let p2 = this.$store.dispatch('getCache', {type: 'businessFlowField'})
      let p3 = this.$store.dispatch('getCache', {type: 'businessFlow'})
      let p4 = this.$store.dispatch('getCache', {type: 'sqLabels'})
      let self = this
      Promise.all([p1, p2, p3, p4]).then(() => {
        self.loading = false
      })
      let labelType = this.$store.state.call.transCache.callLabelType
      this.labelType = labelType
      this.fetchData()
    },
    watch: {
      refreshCallGrade () {
        this.refreshAudio = Math.random() // change audio组件的标志
        this.pauseAudio = 'open'
        this.isAddPerformanceChecked = true    //   绩效录音 复选框 默认为  TRUE
        this.fetchData()
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .layout-qua
    transition transform 0.35s
    box-shadow 0 3px 6px rgba(0, 0, 0, .3)
    animation movelayout-qua .4s
    @keyframes movelayout-qua
      0%
        width 0px
      100%
        width calc(84vw)
  .layin-quau
    width:0px
    transition transform 0.35s
  .call-grade.layin-qua .call-grade-right
    width 0px
  .call-grade.layout-qua .call-grade-right
    width 396px
  .call-grade.layin-qua .call-grade-left
    width 0px
  .call-grade.layout-qua .call-grade-left
    width calc(84vw - 396px)
  .call-grade
    position fixed
    right 0
    top 95px
    height calc(100% - 95px)
    z-index 6
    background-color #fff
    .bus-info
      .listen
        display: none
    .call-grade-left
      float left
      position relative
      z-index 5
    .call-grade-right
      float right
      position relative
      z-index 5
      background-color #f2f2f2
      .el-col-6
        width 100px
      .el-col-18
        width 258px
    .call-grade-left h2,.call-grade-right h2
      padding 14px 20px
      font-size 16px
      font-weight bold
      border-bottom 1px solid #ccc
    .call-grade-right h2
      border-left 1px solid #ccc
    .call-grade-left .call-grade-left-con,.call-grade-right .call-grade-right-con
      height calc(100vh - 185px)
      overflow-y auto
      overflow-x hidden
      padding 20px
    .call-grade-right .call-grade-right-con
      border-left 1px solid #ccc
  .mask-qua
    position fixed
    right 0
    left 0
    top 0
    bottom 0
    z-index 2
    background-color #fff
    /*filter Alpha(Opacity=60)*/
    opacity 0
  .close
    position absolute
    right 28px
    top 14px
    z-index 5
    font-size 16px
    /*background-color #f2f2f2*/
    cursor pointer
</style>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .el-row
    margin-bottom 10px
    .grade_are
      line-height 50px
    .grade_ipt
      line-height 30px
  .wrap_grade
    height 14px
    line-height 14px
    margin-bottom 10px
    .qc_score
      margin-right 10px
    .assist
      float right
      color: $c-main
      cursor pointer
  .business
    border 1px solid #ddd
    background-color #f9f9f9
    padding 5px
    .data
      line-height 34px
      font-size 14px
      border-bottom 1px dotted #ddd
      height 34px
    .bus-info
      padding-top 4px
    .pad-right
      padding-right 6px
    .pad-left
      padding-left 6px
  .clearfix:after
    display block
  .sq-wrap
    margin-bottom 16px
.pad
  padding 8px 15px 0 0
.call-detail table
  bors(1px,#ddd)
  width 100%
  border-collapse collapse
  tr
    height 40px
    border-bottom 1px solid #e7e7eb
    td:nth-of-type(even)
      padding 10px
      color $cf-gray3
    td:nth-of-type(odd)
      padding 10px
      color $cf-gray0
  &:nth-of-type(even)
    color $cf-gray0
  tr:nth-of-type(even) td
    background #f4f5f9
  tr:hover td
    background $c-back
.call-detail table tr:nth-last-child(1)
  border-bottom none
.div-color
  color $cf-level1
.span-color
  color: $c-main;
  cursor: pointer
</style>














